<template>
	<view class="dmm-container dmm-container-grey">
		<u-search placeholder="搜索" height="72" margin="0 30rpx 20rpx" bgColor="#fff" placeholderColor="#d7d7d7" shape="square" v-model="search" :showAction="false" @search="getList({search, deviceType: deviceType.id})"></u-search>
		
		<view class="section tabs">
		  <u-tabs :list="tabs" @click="transferTypeChange"></u-tabs>
		</view>
		
		<view class="section list">
		  <u-cell-group :border="false" v-if="currentTab === 'import'">
		  	<u-cell v-for="(item, idx) in transferInRecords" :key="idx" isLink @click="showDetail(idx)">
					<view slot="title" class="u-cell__title">
						<text class="text">{{item.transferOutAgentName}}</text>
						<text class="text">{{item.transferOutAgentMobile}}</text>
					</view>
		  		<view slot="value" class="u-cell__value">
		  			<text class="text">{{item.transferNum}}台 台卡</text>
		  			<text class="text">{{transferStatusEnum[item.transferStatus]}}</text>
		  		</view>
		  	</u-cell>
		  </u-cell-group>
			
			
			<u-cell-group :border="false" v-if="currentTab === 'out'">
				<u-cell v-for="(item, idx) in transferOutRecords" :key="idx" isLink @click="showDetail(idx)">
					<view slot="title" class="u-cell__title">
						<text class="text text-b">{{item.transferImportAgentName}}</text>
						<text class="text text-tip">{{item.transferImportAgentMobile}}</text>
					</view>
					<view slot="value" class="u-cell__value">
						<text class="text text-primary text-b">{{item.transferNum}}台 台卡</text>
						<text class="text text-tip">{{transferStatusEnum[item.transferStatus]}}</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		
		<view class="tip" v-if="!hasTransferInRecords && currentTab === 'import'">
			<text class="text text-tip">- {{transferInRecords.length ? '没有数据了' : '暂无数据'}} -</text>
		</view>
		
		<view class="tip" v-if="!hasTransferOutRecords && currentTab === 'out'">
			<text class="text text-tip">- {{transferOutRecords.length ? '没有数据了' : '暂无数据'}} -</text>
		</view>
		
		<u-popup class="detail" :show="showDetailPopup" mode="center" closeable @close="showDetailPopup = false">
			<view class="modal-content section">
				<text class="title text text-b">划出记录</text>
				
				<cl-descriptions>
					<cl-desc-item v-for="(item, index) in desc" :key="index" :label="item.label" :content="item.content" :isLink="item.isLink" url="/pages/agentManage/changeRate?modifyType=4">
					</cl-desc-item>
				</cl-descriptions>
				
				<u-button type="primary" v-if="currentTab === 'import' && detail.transferStatus === '00'" text="接收" @click="acceptTransfer({uid: detail.uid, idx: detail.idx, currentTab, cb: () => showDetailPopup = false})"></u-button>
				<u-button type="primary" v-if="currentTab === 'out' && detail.transferStatus === '00'" text="撤回" @click="cancelTransfer({uid: detail.uid, idx: detail.idx, currentTab, cb: () => showDetailPopup = false})"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState, mapActions, mapMutations } from "vuex"
	import {deviceTypeEnum, transferStatusEnum} from '@/common/constants';
	import {uniHistory} from '@/common/utils.js'
	
	export default {
		data() {
			return {
				transferStatusEnum,
				search: '',
				tabs: [
					{name: '划入记录', type: 'import'},
					{name: '划出记录', type: 'out'},
				],
				showDetailPopup: false,
				detail: {},
				currentTab: 'import',
				deviceType: '',
			};
		},
		
		computed: {
			...mapState('transferManage', ['showPopup', 'transferInRecords', 'transferOutRecords', 'transferInRecordsPageNum', 'transferOutRecordsPageNum', 'hasTransferInRecords', 'hasTransferOutRecords']),
			desc: function() {
				const {
					transferOutAgentName,
					transferImportAgentName,
					transferOutAgentMobile,
					transferImportAgentMobile,
					deviceType,
					beginSn,
					endSn,
					transferNum,
					createTime
				} = this.detail
				const {currentTab} = this
				return [{
						label: '代理商名称',
						content: currentTab === 'import' ? transferOutAgentName : transferImportAgentName
					},
					{
						label: '手机号',
						content: currentTab === 'import' ? transferOutAgentMobile : transferImportAgentMobile
					},
					{
						label: '设备类型',
						content: deviceTypeEnum[deviceType]
					},
					{
						label: '序列号',
						content: beginSn ? `${beginSn} - ${endSn}` : '--'
					},
					{
						label: '数量',
						content: transferNum
					},
					{
						label: '划拨时间',
						content: createTime || '--'
					},
				]
			}
		},
		
		methods: {
			...mapMutations('transferManage', ['save']),
			...mapActions('transferManage', ['getRecords', 'cancelTransfer', 'acceptTransfer']),
			transferTypeChange(deviceType) {
				const currentTab = deviceType.type
				this.currentTab = currentTab
				this.getRecords({deviceType: this.deviceType, queryType: currentTab})
			},
			
			gotoDetail(index) {
				this.save({field: 'detail', payload: this.list[index]})
				uniHistory.push('/pages/deviceManage/detail')
			},
			
			showDetail(idx) {
				const {currentTab, transferInRecords, transferOutRecords} = this
	
				if (currentTab === 'import') {
					this.detail = transferInRecords[idx]
				} else {
					this.detail = transferOutRecords[idx]
				}
	
				this.detail.idx = idx
				this.showDetailPopup = true
			},
		},
		
		onLoad(options) {
			const {deviceType} = options
			this.deviceType = deviceType
		},
		
		onShow() {
			this.getRecords({deviceType: this.deviceType, queryType: this.currentTab});
		},
		
		onReachBottom() {
			const {currentTab} = this

			if (currentTab === 'import') {
				if (this.hasTransferInRecords) this.getRecords({pageNum: this.transferInRecordsPageNum + 1, type: this.deviceType, search: this.search, queryType: currentTab})
			} else {
				if (this.hasTransferOutRecords) this.getRecords({pageNum: this.transferOutRecordsPageNum + 1, type: this.deviceType, search: this.search, queryType: currentTab})
			}
		},
	}
</script>

<style lang="scss">
	.dmm-container {
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	
	.section {
		border-radius: $uni-border-radius-lg;
		background-color: #fff;
	}
	.list {
		.u-cell {	
			/deep/ .u-cell__body {
				padding: 32rpx 0;
				
				.u-cell__title, .u-cell__value {
					display: flex;
					flex-direction: column;
					
					.text-b {
						margin-bottom: 30rpx;
					}
				}
			}
			
			/deep/ text {
				font-size: 28rpx;
			}
		}
	}
	
	.u-search {
		/deep/ .u-search__content {
			border-radius: 16rpx !important;
		}
	}
	
	.detail {
		/deep/ .u-popup__content {
			width: 690rpx;
			background-color: transparent;
			
			.modal-content {
				margin: 0;
				padding: 60rpx 30rpx 50rpx;
				
				.title {
					display: block;
					text-align: center;
					font-size: 34rpx;
					margin-bottom: 20rpx;
				}
				
				.section {
					margin: 0;
					padding: 0;
					margin-bottom: 20rpx;
				}
				
				.u-button {
					width: 472rpx !important;
					height: 88rpx;
				}
			}
		}
		
		.data {
			margin-top: 30rpx;
			> view {
				margin-right: 90rpx;
			}
			
			.text {
				font-weight: 700;
			}
		}
	}
	
	.tip {
		text-align: center;
	}
</style>
